import React, { useState } from 'react';
import './login.scss';
import { Button, Checkbox, Form, Input, message } from 'antd';
import Icon from '/@/components/icon';
import { useNavigate } from 'react-router-dom';
import { useDispatchUser } from '/@/store/hooks/user';
import { useDispatchMenu } from '/@/store/hooks/menu';
import backRouer from '/@/router/backRouer.json';
export default function Login() {
  const navigate = useNavigate();
  const { stateSetBackRoute } = useDispatchMenu();
  const [loadings, setLoadings] = useState<boolean>(false);
  const [signin, setSignin] = useState<string>('登录');
  const { stateSetToken } = useDispatchUser();

  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
  const onFinish = (values: any) => {
    setLoadings(true);
    setSignin('登录中...');
    setTimeout(() => {
      stateSetBackRoute(backRouer);
      setLoadings(false);
      setSignin('登录');
      stateSetToken('skdejkkd');
      navigate('/');
      message.success('登录成功🎉🎉🎉');
    }, 2000);
  };
  const onFinishFailed = (errorInfo: any) => {
    // eslint-disable-next-line no-console
    console.log('Failed:', errorInfo);
  };
  return (
    <div className='login'>
      <div className='login_content'>
        <div className='login_content_left'></div>
        <div className='login_content_right'>
          <h3 className='title'>您好！欢迎登录！</h3>
          <Form
            name='basic'
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete='off'
            size='large'
            className='login_from'
          >
            <Form.Item name='username' rules={[{ required: true, message: '请输入用户名!' }]}>
              <Input prefix={<Icon icon='UserOutlined' />} placeholder='请输入用户名' allowClear />
            </Form.Item>
            <Form.Item name='password' rules={[{ required: true, message: '请输入密码!' }]}>
              <Input.Password prefix={<Icon icon='LockOutlined' />} placeholder='请输入密码' allowClear />
            </Form.Item>
            <Form.Item name='remember' valuePropName='checked'>
              <Checkbox>记住密码</Checkbox>
            </Form.Item>
            <Form.Item>
              <Button type='primary' htmlType='submit' style={{ width: '100%' }} loading={loadings}>
                {signin}
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}
